<template>
  <div class="context-menu" ref="contextMenu">
    <ul
      class="context-menu__items"
      v-for="(menu, index) in props.menuItems"
      :key="index"
    >
      <li class="context-menu__item" @click="menu.action">
        <div class="context-menu__label">{{ menu.label }}</div>
        <div class="context-menu__shortcut">{{ menu.shortcut }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import type { IContextMenuItem } from './type'
import { isUnderElementWithClass } from '@/helper'
defineOptions({
  name: 'ContextMenu',
})
// 定义props，接收menuItems和tirgger两个参数
const props = withDefaults(
  defineProps<{
    /**
     * 接收的数据类型
     */
    menuItems: IContextMenuItem[]
    /**触发的区域 */
    tirgger: string
  }>(),
  {
    tirgger: 'edit-wrapper',
  }
)
// 定义contextMenu变量，用于存储contextMenu元素
const contextMenu = ref<HTMLElement | null>(null)
// 定义contextMenuHandle函数，用于处理右键菜单的显示
const contextMenuHandle = (e: MouseEvent) => {
  e.preventDefault()
  // 判断点击的元素是否在tirgger区域内
  if (isUnderElementWithClass(e.target as HTMLElement, props.tirgger)) {
    // 如果contextMenu存在，则显示contextMenu，并设置其位置
    if (contextMenu.value) {
      contextMenu.value.style.display = 'block'
      contextMenu.value.style.left = `${e.pageX}px`
      contextMenu.value.style.top = `${e.pageY}px`
    }
  }
}
// 定义handleClick函数，用于处理点击事件
const handleClick = () => {
  // if(!isUnderElementWithClass(e.target as HTMLElement ,'context-menu')) {
  // 如果点击的元素不在contextMenu区域内，则隐藏contextMenu
  contextMenu.value!.style.display = 'none'
  // }
}
// 在组件挂载时，添加contextmenu和click事件监听
onMounted(() => {
  document.addEventListener('contextmenu', contextMenuHandle)
  document.addEventListener('click', handleClick)
})
// 在组件卸载时，移除contextmenu和click事件监听
onUnmounted(() => {
  document.removeEventListener('contextmenu', contextMenuHandle)
  document.removeEventListener('click', handleClick)
})
</script>

<style scoped lang="scss">
.context-menu {
  display: none;
  position: absolute;
  width: 240px; // Balanced width for compactness
  background: linear-gradient(
    135deg,
    #ffffff,
    #f1f1f1
  ); // Subtle gradient for modern look
  color: #333;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px; // Soft rounded corners
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  z-index: 2000;
  transition: all 0.3s ease-out;
  transform-origin: top left;

  &__items {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px; // Comfortable padding for interaction
    cursor: pointer;
    transition:
      background 0.3s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
    font-size: 14px; // Reduced font size for neatness
    color: #555; // Softer text color

    &:hover {
      background: #e2e6ea; // Light hover effect
      transform: scale(1.02); // Subtle scale effect on hover
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }

  &__label {
    font-weight: 500; // Medium font weight for distinction
    color: #444;
  }

  &__shortcut {
    color: #777; // Muted color for shortcuts
    font-size: 12px; // Smaller font size for shortcuts
    font-weight: 400;
  }
}
</style>
